<template>
  <div class="changeInfo">
    <h3>编辑基本信息</h3>
    <el-divider></el-divider>
    <div class="search personal">
      <div class="title">个人资料</div>
      <el-form  :model="info" :rules="infoRules" ref="infoRef" label-width="100px">
        <el-form-item label="管理员id" prop="ad_id">
          <el-input v-model="info.ad_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="登录名" prop="ad_uname">
          <el-input v-model="info.ad_uname"></el-input>
          <span class="err-message" v-if="nameUsed">该登录名已被使用</span>
        </el-form-item>
        <el-form-item label="姓名" prop="ad_name">
          <el-input v-model="info.ad_name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="ad_sex">
          <el-select v-model="info.ad_sex" placeholder="请选择性别">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
            <el-option label="保密" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="ad_phone">
          <el-input v-model="info.ad_phone"></el-input>
          <span class="err-message" v-if="phoneUsed">该手机号已被绑定</span>
        </el-form-item>
        <el-form-item label="邮箱" prop="ad_email">
          <el-input v-model="info.ad_email"></el-input>
          <span class="err-message" v-if="emailError">邮箱格式错误</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="search">
      <div class="title">账号信息</div>
      <div class="change">
        <span>手机号码</span>
        <input type="text" :value="info.ad_phone?info.ad_phone:'还未绑定手机号码'" placeholder disabled></input>
        <button @click="changePhone" v-if="info.ad_phone" >更换号码</button>
      </div>
<!--      <div class="change">-->
<!--        <span>邮箱</span>-->
<!--        <input type="text" :value="info.email?info.email:'还未绑定邮箱'" placeholder disabled></input>-->
<!--        <button >更换邮箱</button>-->
<!--      </div>-->
    </div>
    <!--    修改头像dialog-->
    <change-avatar-dialog></change-avatar-dialog>
<!--    当用户绑定了手机号时，才修改手机号码-->
    <change-phone-dialog v-if="info.ad_phone" :old-phone="info.ad_phone" :dialogChangePhoneVisible="dialogChangePhoneVisible"
                         @closeChangePhoneDialog="closeChangePhoneDialog()" ></change-phone-dialog>
  </div>

</template>

<script>
import ChangeAvatarDialog from "@/views/profile/ChangeAvatarDialog";
import ChangePhoneDialog from "@/views/profile/ChangePhoneDialog";
import {updateAdmin} from "@/network/system/administrator";

export default {
  name: "ChangeInfo",
  components: {ChangePhoneDialog, ChangeAvatarDialog},
  data(){
    let checkPhone = ((rule,value,callback)=>{   //验证手机号
      if(!/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)){
        return callback(new Error('手机号码格式不正确！'));
      }
      return callback();
    })
    let checkEmail = ((rule,value,callback)=>{  //验证邮箱
      if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value)){
        return callback(new Error('邮箱格式不正确！'));
      }
      return callback();
    })
    return{
      nameUsed: false, //该账号名已被使用
      phoneUsed:false,  //该手机号已被绑定
      emailError: false,  //邮箱格式错误
      dialogChangePhoneVisible:false,  //修改手机号码的dialog
      info:null,
      infoRules:{
        ad_name:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
        ad_uname:[{ required: true, message: '请输入登录名', trigger: 'blur' }],
        ad_phone:[
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }],
        ad_email:[
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }],
      }
    }
  },
  created(){
    this.info = JSON.parse(window.localStorage.getItem("admin"));
  },
  methods:{
    //将提示的信息清除
    closeMessage(){
      this.nameUsed = false;
      this.emailError = false;
      this.phoneUsed = false;
    },
    //更新
    onSubmit(){
      this.$refs.infoRef.validate(valid=> {
        if (valid) { //进行修改
          updateAdmin(this.info).then(res=>{
            if(res.data.status==200){
              this.closeMessage();
              this.$message.success("更新个人资料成功！");
              //更新成功后需要将localStorage中的信息更换
              window.localStorage.setItem("admin",JSON.stringify(this.info));
            }else if(res.data.status==300){
              this.closeMessage();
              this.nameUsed = true;
              this.$message.error(("该账号名已被使用！"));
            }else if(res.data.status==400){
              this.closeMessage();
              this.phoneUsed = true;
              this.$message.error("该手机号已被绑定！");
            }else if(res.data.status==450){
              this.closeMessage();
              this.emailError = true;
              this.$message.error("邮箱格式错误！");
            }
            else{
              this.$message.error("编辑个人资料失败，请重新操作！");
            }
          })
        } else {
          this.$message.error("请按提示填写表单！");
          return false;
        }
      })
    },
    changePhone(){  //点击“更换手机号码”按钮
      this.dialogChangePhoneVisible=true;
    },
    closeChangePhoneDialog(){
      this.dialogChangePhoneVisible = false;
    }
  }
}
</script>

<style scoped>

.search{
  border: 1px solid #999999;
  border-radius: 3px;
  margin-bottom: 10px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
.personal{
  margin-bottom: 20px;
}
.change{
  margin: 0 0 20px 20px;
}
.change *{
  margin-right: 10px;
}
.err-message{
  color:red;
}
</style>
